import React, {Component} from 'react';

class CommentList extends Component {
    static defaultProps = {
        comments: []
    }

    constructor(prop) {
        super(prop)
    }

    delComment(index) {
        const {onDelete} = this.props
        onDelete(index)
    }

    render() {
        const {comments} = this.props


        return (
            <div className="Comment-list-wrapper">
                <h1 className="Comment-list-title">
                    评论列表
                </h1>
                {
                    comments.length > 0
                    ?
                    <ul className="Comment-list">
                        {comments.map((commentItem, index) => {
                            return (
                                <li key={commentItem.content + index} className="Comment-item">
                                    <div className="Comment-username">
                                        {commentItem.username}：
                                    </div>
                                    <p className="Comment-content">{commentItem.content}</p>
                                    <i className="Comment-del" onClick={() => this.delComment(index)}>删除</i>
                                </li>
                            )
                        })}
                    </ul>
                    :
                    <p className="Comment-no-comments">
                        暂无评论
                    </p>
                }
            </div>
        )
    }
}

export default CommentList
